<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Manager</title>

    <!-- Bootstrap core CSS -->
    <link href="styles/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="styles/manage.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="">Home</a></li>
            <li role="presentation"><a href="">Sign out</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Tongji Search Manage</h3>
      </div>

      <div class="manage">
        <div>
          <div>
            <h3 class="spider-title">网页抓取源</h3>
            <button class="btn btn-primary spider" id="start-spider">Start Spider</button>
          </div>
          <div><!--显示target url-->
            <table class="table table-striped" id="target-url-list">
              <tr>
                <th>编号</th>
                <th>url</th>
              </tr>
<!--               <tr>
                <td>1</td>
                <td>http://sse.tongji.edu.cn/InfoCenter/Lastest_Notice.aspx</td>
              </tr> -->
            </table>
          </div>
          <div class="input-group">
            <input type="text" class="form-control" id="theNewUrl" placeholder="Add a new url">
            <span class="input-group-btn">
              <button class="btn btn-default" id="addNew" type="button">Add New</button>
            </span>
          </div>
        </div>
        <hr>
        <div>
          <div>
            <h3 class="manage-title">已抓取到的网页</h3>
          </div>
          <div><!--显示已抓取到的网页-->
          <table class="table table-striped" id="table-got-url">
            <tr>
              <th>编号</th>
              <th>url</th>
              <th>title</th>
              <th>date</th>
              <th>Manage</th>
            </tr>
            <!--<tr>
              <td>0</td>
              <td>http://</td>
              <td>hello</td>
              <td>wordl</td>
              <td><button class="btn btn-primary delete">Delete</button></td>
            </tr>
            <tr>
              <td>1</td>
              <td>http://</td>
              <td>hello</td>
              <td>wordl</td>
              <td><button class="btn btn-primary delete">Delete</button></td>
            </tr>-->
          </table>
          </div>
        </div>
      </div>

      <footer class="footer">
        <p>&copy; Tongji Search 2015</p>
      </footer>

    </div> <!-- /container -->
    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="scripts/ie10-viewport-bug-workaround.js"></script>
    <script>
      //ajax管理页面
      document.getElementById('start-spider').onclick = function () {
        this.disabled = true;
        var startSpider = {'start': true};
        $.ajax({
          type: 'POST',
          url: 'http://localhost:8080/start-spider/',
          data: startSpider,
          success: function (data) {
            //向list中添加tuples
            addOriginUrl(data);
            alert('抓取数据完毕');
            document.getElementById('start-spider').disabled = false;
          },
          dataType: 'json'});
      };
      
      $('document').ready(function () {
        console.log("start load data");
        var loadList = {'order': 'update', 'content': ''};
        $.ajax({
          type: 'POST',
          url: 'http://localhost:8080/manage-data/',
          data: loadList,
          success: function (data) {
            addOriginUrl(data);
          },
          dataType: 'json'});
          addFuncDeleteListening();
          
          document.getElementById('addNew').onclick = function() {
            var newUrl = $('#theNewUrl').val();
            var order = {'order': 'add', 'content': newUrl};

            //把URL加入table中
            var aUrl = '<tr><td>new</td><td>' + newUrl + '</td></tr>';
            $('#target-url-list').append(aUrl);

            $.ajax({
              type: 'POST',
              data: order,
              url: 'http://localhost:8080/manage-data/',
              dataType: 'json'});
            console.log(newUrl);
          }
      });
      
      //向origin list中添加URL
      function addOriginUrl(urlList) {
        console.log(urlList);
        for (var index = 0; index < urlList[0].length; index++) {
          var article = urlList[0][index];
          var btn = '<td><button type="button" class="btn btn-primary delete">Delete</button></td>';
          
          var tempArticle = '<tr><td>' + index + '</td><td>' + article.url + '</td><td>' + article.title + '</td><td>' + article.date + '</td>' + btn + '</tr>';
          $('#table-got-url').append(tempArticle);
          
        }

        for (var index = 0; index < urlList[1].length; index++) {
          var url = urlList[1][index];

          var tempUrl = '<tr><td>' + index +'</td><td>' + url.url + '</td></tr>'
          $('#target-url-list').append(tempUrl);
        }

        addFuncDeleteListening();
      }
      
      function addFuncDeleteListening() {
        var deleteBtn = document.getElementsByClassName('delete');
        for (var index = 0; index < deleteBtn.length; index++) {
          deleteBtn[index].onclick = function () {
            var parent = (this.parentNode).parentNode;
            var content = parent.childNodes[3].innerHTML;
            console.log(content);
            parent.remove();

            var deletedRecord = {'order': 'deleteGot', 'content': content};
            //删除数据库中记录
            $.ajax({
              type: 'POST',
              url: 'http://localhost:8080/manage-data/',
              data: deletedRecord,
              dataType: 'json'});
          }
        } 
      }

      document.getElementById('completed').onclick = function () {
        var completedEdit = {'order': 'completed', 'content': ''};
//        alert('更新索引完成!');

        $.ajax({
          type: 'POST',
          url: 'http://localhost:8080/manage-data/',
          data: completedEdit,
          dataType: 'json',
          success: function (data) {

            if (data === 'succeed') {
              alert('更新索引完成!');
            }
          }});
      }

    </script>
  </body>
</html>
